<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn{
            width: 140px;
            height: 30px;
            line-height: 30px;
            background-color: blue;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!--
        HTML事件：直接在HTML元素标签内添加事件，执行脚本
        功能：在HTML元素上绑定事件，说明：执行脚本可以是一个函数的调用
        关于this指向
        在事件触发的函数中，this是对该DOM对象的引用
    -->
    <input type="button" value='弹出' onclick="alert('你已经点击')">
    <div id="btn" class="btn" onmouseover="mouseiverFn(this,'red')"
    onmouseout="mouseup(this,'blue')"
    >开始</div>
    <script>
        function mouseiverFn(btn,color){
            // console.log(btn)
            // var btn = document.getElementById("btn")
            btn.style.backgroundColor=color
        }
        function mouseup(btn,color){
            btn.style.backgroundColor=color
        }
    </script>
</body>
</html>